<template>
  <div class="order-page">
    <div class="tabs">
      <button
        v-for="tab in tabs"
        :key="tab"
        :class="{ active: activeTab === tab }"
        @click="activeTab = tab"
      >
        {{ tab }}
      </button>
    </div>

    <div class="content">
      <div v-if="activeTab === '草稿'">
        <ul>
          <li v-for="order in orders.drafts" :key="order.id">
            {{ order.title }} - {{ order.date }}
          </li>
        </ul>
      </div>

      <div v-if="activeTab === '待接单'">
        <ul>
          <li v-for="order in orders.pending" :key="order.id">
            {{ order.title }} - {{ order.date }}
          </li>
        </ul>
      </div>

      <div v-if="activeTab === '已完成'">
        <ul>
          <li v-for="order in orders.completed" :key="order.id">
            {{ order.title }} - {{ order.date }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import constants from '@/utils/electric-vehicle-constants.json'

const tabs = ['草稿', '待接单', '已完成']
const activeTab = ref(tabs[0])
const orders = constants.orders
</script>

<style scoped>
.order-page {
  padding: 20px;
}

.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.tabs button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}

.tabs button.active {
  background: #409eff;
  color: white;
}

.content ul {
  list-style: none;
  padding: 0;
}

.content li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
